<template>
	<view class="">
		<view class="uni-popup-dialog  ">

			<view class="uni-dialog-title">
				<text class="f-18 f-w-800" style="color: #000;">{{title_edit}}</text>
			</view>

			<view v-if="is_up" class="p-20">
				<template v-if="log=='下载完成'">
					<view class="p-20 banmi_flex j-c w800" style="color: #409eff;">
						{{log}}
					</view>
					<view class="p-20 banmi_flex j-c  " style="padding-bottom: 60rpx;">
						<view @click="on_confirm()" class="banmi_bt_1 banmi_flex j-c a-c"
							style="width: 120rpx;height: 30px;">
							<text>去安装</text>
						</view>
					</view>
				</template>
				<template v-if="log=='提示'">
					<view class="banmi_flex j-c " style="color: #409eff;padding: 20px 80px 30px 80px;">
						{{msg}}
					</view>
					<view class="p-20 banmi_flex j-c  " style="padding-bottom: 80rpx;">
						<view @click="close()" class="banmi_bt_1 banmi_flex j-c a-c"
							style="width: 120rpx;height: 30px;">
							<text>关闭</text>
						</view>
					</view>
				</template>
				<template v-if="log=='正在下载'">
					<view class="p-20 banmi_flex j-c f-w-800" style="color: #409eff;">
						{{log}}
					</view>
					<view class="banmi_flex j-c" style="width: 100%;padding-top: 20px;">
						<ProgressBar :size="size" :issize="down_size" :percentage="percentage" Type="aqua"
							:Vice="false">
						</ProgressBar>
					</view>
					<view class=" banmi_flex j-c cred f-w-800  p-t-3" 
					style="padding:  40px 20px 30px 20px;">
						请勿关闭此窗口
					</view>
				</template>
			</view>



		</view>
	</view>
</template>

<script>
	import popup from '../uni-popup/popup.js'
	import {
		initVueI18n
	} from '@dcloudio/uni-i18n'
	import messages from '../uni-popup/i18n/index.js'
	const {
		t
	} = initVueI18n(messages)

	import ProgressBar from '@/components/ai-progress/ai-progress.vue';

	export default {
		name: "uniPopupDialog",
		mixins: [popup],
		emits: ['confirm', 'close'],
		components: {
			ProgressBar,
		},
		props: {

			name: {
				type: [String, Number],
				default: ''
			},
			plugin_id: {
				type: [String, Number],
				default: ''
			},
			catalogue: {
				type: [String, Number],
				default: ''
			},
			t: {
				type: [String, Number],
				default: ''
			},
			sign: {
				type: [String, Number],
				default: ''
			},
			ttkey: {
				type: [String, Number],
				default: ''
			},
			order_id: {
				type: [String, Number],
				default: ''
			},
			catalogue_branch: {
				type: [String, Number],
				default: ''
			},
			find: {
				type: Object,
				default () {
					return {};
				}
			},

			title: {
				type: String,
				default: ''
			},

		},
		data() {
			return {
				is_up: true,
				size: 20, //总大小mb
				down_size: 0, //已下载多少mb
				percentage: 0, //下载进度
			  log: '正在下载',
	 
				system_version: '',
				msg: '',
				title_edit: ''
			}
		},
		computed: {

			okText() {
				return this.confirmText || t("uni-popup.ok")
			},
			closeText() {
				return this.cancelText || t("uni-popup.cancel")
			},
			placeholderText() {
				return this.placeholder || t("uni-popup.placeholder")
			},
			titleText() {
				return this.title || t("uni-popup.title")
			}
		},

		created() {
			this.title_edit = this.title
			this.on_down();
		},

		methods: {

			on_down() {
				var that = this;
				var data = {
					system_version: uni.getStorageSync('system_version'),
					catalogue: this.catalogue,
					plugin_id: this.plugin_id,
					plugin_ttkey: this.ttkey,
					plugin_t: this.t,
					plugin_sign: this.sign,
					plugin_order_id: this.order_id,
					plugin_catalogue_branch: this.catalogue_branch,

				}

				this.Banmikeji.plugin_down(data).then(ret => {

					if (ret.status == 200) {
						that.task_id = ret.data.task_id;
						that.part_num = ret.data.part_num;
						that.size1 = ret.data.size;
						var size = ret.data.size / 1024 / 1024;
						that.size = size.toFixed(2)
						that.part_down(0);
					} else {
						that.log = '提示'
						that.title_edit = '提示';
						that.msg = ret.msg
						return

					}
				})

			},
			async part_down(i) {

				let that = this;
				var data = {
					task_id: this.task_id,
					part_i: i,
					catalogue: this.catalogue,
					plugin_id: this.plugin_id,
					plugin_ttkey: this.ttkey,
					plugin_t: this.t,
					plugin_sign: this.sign,
					plugin_order_id: this.order_id,
					plugin_catalogue_branch: this.catalogue_branch,
				}
				const ret = await this.Banmikeji.plugin_part_down(data);
				if (that.part_num - 1 > i) {
					this.down_size = i + 'mb';
					var down_size = i * 1024 * 1024;
					this.percentage = down_size / Number(that.size1) * 100;
					this.part_down(i + 1);
				} else {
					this.down_size = i + 'mb';
					this.percentage = 98;
					setTimeout(function() {

						that.part_merge();
					}, 500);

				}



			},
			async part_merge() {
				var data = {
					task_id: '',
					part_i: '',
					catalogue: this.catalogue,
					plugin_id: this.plugin_id,
					plugin_ttkey: this.ttkey,
					plugin_t: this.t,
					plugin_sign: this.sign,
					plugin_order_id: this.order_id,
					plugin_catalogue_branch: this.catalogue_branch,
				}
				const ret = await this.Banmikeji.plugin_part_merge(data);
				this.log = '下载完成';
				uni.showToast({
					title: ret.msg,
					icon: 'none'
				})

			},

			on_confirm() {
				this.popup.close()
				this.$emit('confirm', this.catalogue_branch)
			},
			/**
			 * 点击取消按钮
			 */
			closeDialog() {
				this.$emit('close')
				if (this.beforeClose) return
				this.popup.close()
			},
			close() {
				this.popup.close()
			}
		}
	}
</script>


<style lang="scss">
	.classify-liv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 2px #FD9A01;
		text-align: center;
		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	.classify-lixzlv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 2px #999;

		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	@media screen and (min-width: 500px) {
		.uni-popup-dialog {
			width: 550px;
			border-radius: 11px;
			background-color: #fff;
		}
	}

	@media screen and (max-width: 500px) {
		.uni-popup-dialog {
			width: 320px;
			border-radius: 11px;
			background-color: #fff;
		}
	}

	.uni-dialog-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 25px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}

	.uni-dialog-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 10px;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6C6C6C;
	}

	.f20 {
		font-size: 24px;
	}

	.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */

		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
	}

	.uni-dialog-button-text {
		font-size: 16px;
		color: #333;
	}

	.uni-button-color {
		color: #007aff;
	}

	.uni-dialog-input {
		flex: 1;
		font-size: 14px;
		border: 1px #eee solid;
		height: 40px;
		padding: 0 10px;
		border-radius: 5px;
		color: #555;
	}

	.uni-popup__success {
		color: #4cd964;
	}

	.uni-popup__warn {
		color: #f0ad4e;
	}

	.uni-popup__error {
		color: #dd524d;
	}

	.uni-popup__info {
		color: #909399;
	}
</style>